<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单提交</title>
    <!-- css -->
    <link rel="stylesheet" href="/formjs/cdn/element-ui/theme-chalk/index.css">
    <!-- babel -->
    <script src="/resource/babel/babel-browser.min.js"></script>
    <!-- vue -->
    <script src="/formjs/cdn/vue/vue.min.js"></script>
    <!-- element-ui js -->
    <script src="/formjs/cdn/element-ui/index.js"></script>
    <!-- axios -->
    <script src="/formjs/cdn/axios/axios.min.js"></script>
    <!-- avue -->
    <script src="/formjs/cdn/avue/avue.min.js"></script>

</head>

<body>
    <div id="app">
        <avue-form :option="option" v-model="form" @submit="handleSubmit"></avue-form>
    </div>
</body>
<script type="text/babel">
    var json = {
        "column": [
            {
                "type": "input",
                "label": "用户名",
                "prop": "name",
                "span": 12,
                "display": true
            },
            {
                "type": "password",
                "label": "密码",
                "prop": "password",
                "span": 12,
                "display": true
            },
            {
                "type": "dynamic",
                "label": "子表单",
                "prop": "dynamic",
                "span": 24,
                "display": true,
                "children": {
                    "align": "center",
                    "headerAlign": "center",
                    "column": [
                        {
                            "type": "input",
                            "label": "用户名",
                            "prop": "name1",
                            "display": true
                        },
                        {
                            "type": "password",
                            "label": "密码",
                            "prop": "password1",
                            "display": true
                        }
                    ]
                }
            }
        ]
    }
    new Vue({
        el: "#app",
        data() {
            return {
                form: {
                    text: '动态内容1'
                },
                option: json
            }
        },
        created() {

        },
        methods: {
            handleSubmit(form, done) {
                this.$message.success('3s后关闭');
                setTimeout(() => {
                    done()
                }, 3000)
            }
        }
    })
</script>
</html>